<template>
	<view class="content">
		<view v-if="pageShow" class="container">
			<scroll-view class="scroll" :scroll-y="true">
				<view class="swiper-area">
					<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
						@change="onSwiperChange">
						<swiper-item v-for="(item, index) in banners" :key="index" class="swiper-item"
							@click="viewImg(item)">
							<image class="swiper-img" :src="item" mode="aspectFill"> </image>
						</swiper-item>
					</swiper>
				</view>
				<view class="header">
					<view class="header-title">
						<text class="title">{{ shopInfo.name }}</text>
						<text class="price">{{
              shopInfo.price == 0 ? "面议" : "¥" + shopInfo.price
            }}</text>
					</view>
					<view class="header-collect" @click="collectShop">
						<!-- <image
              :src="
                isCollect === 0
                  ? 'https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/shopImg/collect_icon.png'
                  : 'https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/shopImg/collect_select.png'
              "
            >
            </image>
            <text>收藏</text> -->
					</view>
				</view>
				<view class="service-info">
					<view class="service" @click="goServiceDetail">
						<view class="logo">
							<image :src="serviceInfo.logo" mode="aspectFill"></image>
						</view>
						<view class="describe">
							<text class="title">{{ serviceInfo.name }}</text>
							<text class="goods">擅长服务：{{ goodService }}</text>
						</view>
					</view>
				</view>
				<view class="service-detail">
					<view v-if="
              shopInfo.service_time ||
              shopInfo.preparation ||
              shopInfo.service_process ||
              shopInfo.service_content
            " class="title solid-bottom">
						服务详情
					</view>
					<view class="service-content">
						<view v-if="shopInfo.service_time" class="content">
							<view class="icon"></view>
							<view class="content-item">
								<text class="content-title">服务时间</text>
								<text class="detail">{{ shopInfo.service_time }}</text>
							</view>
						</view>
						<view v-if="shopInfo.preparation" class="content">
							<view class="icon"></view>
							<view class="content-item">
								<text class="content-title">准备资料</text>
								<text class="detail">{{ shopInfo.preparation }}</text>
							</view>
						</view>
						<view v-if="shopInfo.service_process" class="content">
							<view class="icon"></view>
							<view class="content-item">
								<text class="content-title">服务流程</text>
								<text class="detail">{{ shopInfo.service_process }}</text>
							</view>
						</view>
						<view v-if="shopInfo.service_content" class="content">
							<view class="icon"></view>
							<view class="content-item">
								<text class="content-title">服务内容</text>
								<text class="detail">{{ shopInfo.service_content }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- <view class="bottom-btn">
        <view class="btn-ask" @click.stop="nowAsk"> 立即咨询 </view>
        <view class="btn-buy" @click.stop="nowBuy"> 立即购买 </view>
      </view> -->
		</view>
		<view class="bottom-btn1">
			<wx-open-launch-app id="launch-btn" @error="handleErrorFn" @launch="handleLaunchFn"
				:extinfo="encodedExtInfo" appid="wx8fbbb431d64af37e">
				<script type="text/wxtag-template">
					<style>
                 .btn1 {
                   padding: 12px;
                 }
                 .download {
                   color: #ffffff;
                	 background-color: #FF5D34;
                   width:100%;
                   height:100%;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   font-size: 16px;
                   font-family: PingFangSC-Medium, PingFang SC;
                   font-weight: 500;
                   border-radius: 2px;
                 }
               </style>
               <button class="download btn1" style="height:100%;width:343px;border:none; border-radius: 28px;">打开app</button>
        </script>
			</wx-open-launch-app>
		</view>
	</view>
</template>
<script>
	import info from "@/static/info.js";
	import jweixin from "@/static/jweixin-1.6.0.js";
	export default {
		data() {
			return {
				isWeiXinFlag: false,
				contentObj: {},
				extInfo: {
					path: "",
					type: "h5",
				},

				shopId: "",
				//商品详情
				shopObj: {},
				banners: [],
				shopInfo: {},
				serviceInfo: {},
				swiperIndex: 0,
				isCollect: null,

				//服务商详情
				serviceObj: {},
				goodService: "",

				pageShow: false,
			};
		},
		onLoad(e) {
			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.isWeiXinFlag = true;
			} else {
				this.isWeiXinFlag = false;
			}
			if (!this.isWeiXinFlag) {
				uni.showToast({
					title: "请在微信环境中打开",
					icon: "none",
					duration: 2000,
				});
			}
			this.postRequest();
			let params = window.location.href.split("#")[1];
			if (params) {
				let params1 = params.replace(/\//g, "");
				let id = params1.split("=")[1];
				this.shopId = id;
				if (id) {
					this.extInfo.path = `/enterpriseServer/productInfo/index?id=${id}`;
				} else {
					this.extInfo.path = `/enterpriseServer/service/index`;
				}
			}
		},
		methods: {
			postRequest() {
				let params = {
					url: window.location.href.split("#")[0],
				};

				var xhr = new XMLHttpRequest();
				xhr.open(
					"POST",
					"https://api.xiaozhucaishui.com/api/H5share/get_sign",
					true
				);
				xhr.setRequestHeader("Content-Type", "application/json");
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						var data = JSON.parse(xhr.responseText);
						if (data.code === 1) {
							this.contentObj = data;
							this.authSDK(data);
						}
					} else if (xhr.readyState == 4) {
						console.error("Error:", xhr.status);
					}
					this.getDetail(this.shopId);
				}.bind(this);
				xhr.send(JSON.stringify(params));
			},

			authSDK(data) {
				let appId = data.appid;
				let nonceStr = data.noncestr;
				let signature = data.signature;
				let timestamp = data.timestamp;
				jweixin.config({
					debug: false,
					appId: appId,
					timestamp: timestamp,
					nonceStr: nonceStr,
					signature: signature,
					jsApiList: ["getLocation"],
					openTagList: ["wx-open-launch-app", "wx-open-launch-weapp"], // 这里要配置一下
				});
				jweixin.ready(function() {
					jweixin.checkJsApi({
						jsApiList: [
							"getLocation",
							"wx-open-launch-app",
							"wx-open-launch-weapp",
						], // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,
						success: function(res) {
							console.log("wxJsApi success:", res);
							let refresh = uni.getStorageSync("refreshFlag") ?
								uni.getStorageSync("refreshFlag") :
								false;
							if (refresh === false) {
								uni.setStorageSync("refreshFlag", true);
								var localUrl = window.location.href;
								var redirect_uri = encodeURIComponent(localUrl);
								window.location.href =
									"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf252ac6398752355" +
									"&redirect_uri=" +
									redirect_uri +
									"&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
								//强制刷新
								location.reload();
							}
						},
						fail: (err) => {
							alert("checkJsApi fail", err);
							console.log("wxJsApi fail:", err);
						},
					});
					// config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
				});
			},
			handleErrorFn(e) {
				console.log("跳转失败", JSON.stringify(e));
				uni.showToast({
					title: "跳转失败",
					icon: "none",
				});
				let platform = uni.getSystemInfoSync().platform;
				setTimeout(() => {
					if (platform == "ios") {
						window.open(
							"https://apps.apple.com/cn/app/%E5%B0%8F%E7%AB%B9%E8%B4%A2%E7%A8%8E/id1614986978"
						);
					} else if (platform == "android") {
						window.open(
							"https://api.xiaozhucaishui.com/h5/#/pages/downLoad/downLoad"
						);
					}
				}, 1500);
			},
			// 监听launch 函数
			handleLaunchFn(e) {
				console.log("跳转成功", JSON.stringify(e));
			},

			//获取服务商品详情
			async getDetail(id) {
				let res = await info.getShopDetail({
					id: id,
				});
				if (res.code == 1) {
					this.shopObj = res.data;
					this.shopInfo = res.data.info;
					this.isCollect = res.data.is_collect;
					this.serviceInfo = res.data.service_info;
					this.banners = res.data.info.pic.split(",");
					this.getServiceInfo(res.data.service_info.id);
					this.pageShow = true;
				} else {
					this.$common.msgShow(res.msg);
				}
			},
			//获取服务商详情
			async getServiceInfo(val) {
				let res = await info.getServiceDetail({
					id: val,
				});
				if (res.code === 1) {
					this.serviceObj = res.data;
					let arr = [];
					res.data.good_services.forEach((val) => {
						arr.push(val.name);
					});
					this.goodService = arr.join("、");
				} else {
					this.$common.msgShow(res.msg);
				}
			},

			//轮播图事件
			onSwiperChange(e) {
				this.swiperIndex = e.detail.current;
			},

			//banner图预览
			viewImg(item) {
				uni.previewImage({
					urls: [item],
				});
			},
		},

		computed: {
			encodedExtInfo: function() {
				return JSON.stringify(this.extInfo);
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/static/index.scss";

	.bottom-btn1 {
		width: 686rpx;
		position: fixed;
		bottom: 60rpx;
		left: 32rpx;
		color: #fff;
		background: #ff5d34;
		display: flex;
		border-radius: 45rpx;
		justify-content: center;
	}
</style>